<template>
    <UxDialog class="more-image-dialog" :visible="value" @close="close()" :full-screen="true">
        <div class="more-image" :class="{loading:loading}" v-loading='loading' v-if="value">
            <div ref="preview" class="more-image-preview" @mouseenter="mouseEnter($event)" @mouseleave="mouseLeave($event)">
                <button @click="setActive('-1')" class="el-icon-arrow-left" :class="{ disabled: active_index <= 0 }"></button>
                <button @click="setActive('+1')" class="el-icon-arrow-right" :class="{ disabled: active_index + 1 == (img_list || []).length }"></button>
                <img v-lazy="$getImageUrl(img_list[active_index].url || '','largest')" :key="img_list[active_index].url || ''" :style="previewStyle" ref="image" />
            </div>
            <div class="more-image-list" v-show="img_list.length > 0">
                <p>On-model images</p>
                <h3>{{value.name}}</h3>
                <ul>
                    <li v-for="(item, index) in img_list" :key="index" :class="{ active: index == active_index,disabled:!item.show }" @click="setActive(index)">
                        <img v-lazy="$getImageUrl(item.url)" :key="item.url" alt="" />
                    </li>
                </ul>
                <div class="swiper-bottom" v-if="img_list.length > 0">
                    <cite>
                        <button @click="setActive('-1')" class="iconfont icon-zuo" :class="{ disabled: active_index <= 1 }"></button>
                        <ul @mousewheel="onMousewheel($event)">
                            <li v-for="(item, index) in img_list" :key="index" :class="{ active: index == active_index,disabled:!item.show }" @click="setActive(index)">
                                <img v-lazy="$getImageUrl(item.url)" :key="item.url" alt="" />
                            </li>
                        </ul>
                        <button @click="setActive('+1')" class="iconfont icon-you" :class="{ disabled: active_index + 1 == (img_list || []).length }"></button>
                    </cite>
                </div>
            </div>
        </div>
    </UxDialog>
</template>
<script>
export default {
    name: "MoreImageDialog",
    props: {
        value: {}
    },
    data () {
        return {
            img_list: [],
            active_index: 0,
            rect: null,
            previewStyle: null,
            loading: false
        };
    },
    watch: {
        value (v, ov) {
            if (v && v != ov) {
                // 展示时
                // this.startEvent()
                this.img_list = Array.isArray(v.mockup) ? v.mockup : [];
            }
        },
    },
    computed: {
    },
    methods: {
        // 获取数据
        close () {
            // this.destroyEvent()
            this.$emit("input", null);
        },
        getPrintAreaImage (active) {
            // https://img.podpartner.com/product/110U001/16614233526645f3f3820-fc36-4c94-92e5-f9dd4814c88b.png?x-oss-process=image/resize,w_320/format,webp/quality,q_90
            let src = 'https://img.podpartner.com/';
            src += active.url || '';
            return src
        },


        setActive (item) {
            let index = this.active_index;
            let active = 0;

            if (item == "-1") {
                // 向前
                active = Math.max(0, index - 1);
            } else if (item === "+1") {
                // 向右
                active = Math.min(this.img_list.length - 1, index + 1);
            } else {
                active = item;
            }
            if (active != this.active_index) {
                this.active_index = active;
                this.scrollToModel();
            }
        },

        // 滚动距离
        scrollToModel () {
            let index = this.active_index;
            let el = this.$el.querySelector('.swiper-bottom')
            let warp = el.querySelector("ul");
            let elem = el.querySelectorAll("li")[index];

            let scrollTo = (form, to) => {
                let left = form + (to > form ? form + 1 : form - 1);
                let over = to > form ? left >= to : left <= to;
                warp.scrollLeft = left;
                !over && setTimeout((e) => scrollTo(left, to), 1);
            };

            if (warp && elem) {
                let outer = warp.getBoundingClientRect();
                let inner = elem.getBoundingClientRect();
                let scrollLeft = warp.scrollLeft;

                let max = warp.scrollWidth - outer.width;
                let min = 0;
                let left = inner.left - outer.left + scrollLeft;
                let toleft = parseInt(left + 0.5 * inner.width - 0.5 * outer.width);

                // 缓动到目标点
                // scrollTo(scrollLeft,Math.min(max,Math.max(min,toleft)))

                warp.scrollLeft = Math.min(max, Math.max(min, toleft));
            }
        },

        // 鼠标进入
        mouseEnter (event) {
            let image = this.$refs.image;
            if (image && image.getAttribute("lazy") == "loaded") {
                this.rect = this.$refs.preview.getBoundingClientRect();
            }
        },
        mouseLeave (event) {
            this.rect = null;
            this.previewStyle = null;
        },
        mouseMove (event) {
            if (this.rect) {
                // scale是中点位置缩放
                const touch = (event.targetTouches || [])[0];
                const clientX = touch ? touch.clientX : event.clientX;
                const clientY = touch ? touch.clientY : event.clientY;

                let w = this.rect.width;
                let h = this.rect.height;
                let x = clientX - this.rect.left;
                let y = clientY - this.rect.top;

                let scale = 1.88;
                let left = -0.5 * x * (scale - 1);
                let top = -0.5 * y * (scale - 1);

                this.previewStyle = {
                    transform: `scale(${scale}) translate3d(${left}px,${top}px,0)`,
                };
            }
        },
        startEvent () {
            window.addEventListener("mousemove", this.mouseMove, false); // 鼠标移动
            window.addEventListener('touchmove', this.mouseMove, { passive: false }); // 鼠标移动
        },
        destroyEvent () {
            window.removeEventListener("mousemove", this.mouseMove); // 鼠标移动
            window.removeEventListener("touchmove", this.mouseMove); // 鼠标移动
        }
    },
};
</script>
<style lang="scss" scoped>
.more-image-dialog::v-deep {
    & > .dialog-content {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0px;
        padding: 0;
        box-sizing: border-box;
        & > h2 {
            display: none;
        }
        & > h6 {
            margin: 14px 20px 0 0;
            // display: none;
        }

        & > h6 i {
            font-size: 30px;
        }

        & > .dialog-body > .dialog-layout {
            transition: none;
            background: none;
        }
    }
}
.more-image {
    &.loading {
        &::v-deep .el-loading-mask {
            z-index: 1;
        }
        & * {
            opacity: 0;
        }
    }
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100vh;
    .more-image-preview {
        position: relative;
        width: 100vh;
        height: 100vh;
        background: #e5e7e1;
        overflow: hidden;
        // cursor: move;
        background-clip: padding-box;
        &:hover {
            & > button {
                opacity: 1;
            }
        }
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: 0 0;
            max-width: 100%;
            max-height: 100%;
            min-width: 32px;
            &[loaded='loading'] {
                background-image: url(@/assets/images/loading.gif);
                background-position: center;
                background-size: 32px 32px;
                background-repeat: no-repeat;
            }
        }
        & > button {
            z-index: 1;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 52px;
            height: 52px;
            border-radius: 26px;
            color: #666666;
            background-color: #fcfcfa;
            border-color: #cbcdc8;
            font-size: 24px;
            font-weight: bold;
            opacity: 0.3;
            &.disabled {
                background: transparent;
                cursor: default;
                &:hover {
                    color: #666666;
                }
            }
            &:hover {
                color: #ea4c89;
            }
            &:nth-child(1) {
                left: 24px;
            }
            &:nth-child(2) {
                right: 24px;
            }
        }
    }
    .more-image-list {
        box-sizing: border-box;
        padding: 10% 0;
        margin-left: 20px;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        & > * {
            width: 356px;
        }
        & > p {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 16px;
            margin-bottom: 14px;
        }
        & > h3 {
            font-size: 18px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 24px;
            margin-bottom: 26px;
        }
        & > ul {
            max-height: 516px;
            overflow-y: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0 -1px;
            &::-webkit-scrollbar {
                width: 6px;
                background: transparent;
                border-radius: 4px;
            }
            &::-webkit-scrollbar-thumb {
                background: #d7d7d7;
            }
            li {
                width: 80px;
                height: 80px;
                margin: 1px;
                border-radius: 4px;
                border: 2px solid transparent;
                display: flex;
                align-items: center;
                justify-content: center;
                &:hover {
                    border-color: #f6b2cd;
                }
                &.active {
                    border-color: #f6b2cd;
                }
                &.disabled {
                    display: none;
                }
                img {
                    max-width: 80px;
                    max-height: 80px;
                    min-width: 32px;
                    border-radius: 3px;
                }
            }
        }
        .swiper-bottom {
            display: none;
            margin-top: 20px;
            position: relative;
            height: 66px;

            cite {
                position: absolute;
                display: block;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                font-size: 0;
                text-align: center;
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
            }

            button {
                display: inline-block;
                vertical-align: top;
                width: 24px;
                height: 100%;
                background: none;
                border: none;
                padding: 0;
                &:nth-child(3) {
                    left: auto;
                    right: 0;
                }
                &.disabled {
                    cursor: default;
                    color: #919191;
                }
            }
            ul {
                display: inline-block;
                vertical-align: top;
                max-width: calc(100% - 48px);
                overflow-x: auto;
                overflow-y: hidden;
                text-align: center;
                white-space: nowrap;
                &::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                }
            }
            li {
                display: inline-block;
                vertical-align: top;
                position: relative;
                margin: 0 5px;
                width: 64px;
                height: 64px;
                border: 1px solid #dcdcdc;
                border-radius: 6px;
                overflow: hidden;
                cursor: pointer;

                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 6px;
                    max-width: 100%;
                    max-height: 100%;
                    min-width: 32px;
                }

                &.active {
                    border-color: #ea4c89;
                    &:hover {
                        border-color: #ea4c89;
                    }
                }

                &:hover {
                    border-color: #ea4c897e;
                }
            }
        }
    }
}

@media (max-width: 960px) {
    .more-image-dialog::v-deep {
        & > .dialog-content {
            & > h6 {
                left: auto;
                top: 6px;
                right: 6px;
                width: 24px;
                height: 24px;
            }
        }
    }
    .more-image {
        flex-direction: column !important;
        .more-image-preview {
            width: 100vw;
            height: 100vw;
            & > button {
                display: none;
            }
        }
        .more-image-list {
            flex: 0;
            padding: 20px 0;
            margin: 0 20px;
            height: auto;
            & > ul {
                display: none;
                max-height: none !important;
            }
        }
        .swiper-bottom {
            display: block !important;
        }
    }
}
</style>
